<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件委托</title>
        <style>
            .tab { border-spacing: 1px; background: blue; }
            .tab td { width: 200px; height: 100px; background: white; overflow: hidden; }
            .tab td textarea { 
                width: 100%; 
                height: 100%; 
                border: none; 
                outline: none; 
                background: #dfdfdf; 
                resize: none;
            }
        </style>
    </head>
    <body>
        <h1>事件委托</h1>
        <p>所谓事件委托就是将子元素上某种事件委托给父元素的事件监听器处理</p>
        <h4>可编辑的表格</h4>
        <table class="tab first">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <h4>控制列表背景</h4>
        <ul class="unordered-list">
            <li>红烧茄子</li>
            <li>鱼香茄子</li>
            <li>豆角茄子</li>
        </ul>
        <script>
            (function(){
                const blurHandler = evt => {
                    let textarea = evt.target;
                    console.log( textarea.value );
                    let parent = textarea.parentNode;
                    parent.innerHTML = textarea.value;
                }

                const dblclickHandler = evt => {
                    let t = evt.target;
                    if( t.nodeName === 'TD' ) {
                        // 尝试获取 单元格 中原有的内容
                        let old = t.innerHTML;
                        // 清空 单元格 原有的内容
                        t.innerHTML = '';
                        // 创建 textarea 元素
                        let textarea = document.createElement('textarea');
                        // 将单元格中本来存在的内容填充到 textarea 元素中
                        textarea.value = old ;
                        // 为 textarea 绑定`失去焦点`的事件监听器
                        textarea.addEventListener('blur', blurHandler, false);
                        // 在单元格内部追加 textarea 元素
                        t.appendChild(textarea);
                        // 调用 textarea 的函数让其获得焦点
                        textarea.focus();
                    }
                }
                /*
                const tds = document.querySelectorAll('.first td');
                // 遍历每个单元格元素并逐个绑定事件监听器
                Array.from(tds).forEach( td => {
                    td.addEventListener('dblclick', dblclickHandler, false);
                });
                */
                const firstTab = document.querySelector('.first.tab');
                firstTab.addEventListener('dblclick', dblclickHandler, false);

                const ul = document.querySelector('.unordered-list');
                ul.addEventListener('mouseover', evt => {
                    let t = evt.target;
                    if( t.nodeName === 'LI' ) {
                        t.style.backgroundColor = '#dfdfdf';
                    }
                }, false);

                ul.addEventListener('mouseout', evt => {
                    let t = evt.target;
                    if( t.nodeName === 'LI' ) {
                        // t.style.backgroundColor = 'transparent';
                        t.removeAttribute('style');
                    }
                }, false);

            })();
        </script>
    </body>
</html>